<template>
  <div id="preCharts">
  </div>
</template>

<script>
import BS from '../dataManage'
import { changeMsg } from '../vuex/action'  
var echarts = require('echarts');
export default {
  props:{
    'pieurl':{
      type:String
    }
  },
  vuex: {
   getters: {
      msg(state){
        return state.msg
      }
    }
  },
  ready() {
    var myChart = echarts.init(document.getElementById('preCharts'));           
      // 绘制图表
    myChart.setOption({
        title: { 
          text: '应用部门分布统计' , 
          x :'center',
          textStyle :{
            fontSize :12,
            fontWeight:'normal',
            color:'#b3c2cc'
          }
        },
        legend: {  
            selectMode:'single'
        },  
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'',
                type:'pie',
                radius: ['48%', '80%'],
                center:['50%', '55%'],
                avoidLabelOverlap: false,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: []
            }
          ]
      });  
    BS.getPieCharts.call(myChart,this.msg,this.pieurl);
    this.$watch('msg',function(){
      BS.getPieCharts.call(myChart,this.msg,this.pieurl);
    })
  }
}
</script>

<style scoped>
#preCharts{
  width: 100%;
  height: 350px;
}
</style>


